<template>
	<div>
		<head-top></head-top>
		<el-row style="margin-top: 20px;">
			<el-col :span="14" :offset="4">
		<header class="form_header">申请关键字</header>
		<el-form :model="askeywordsObj" ref="askeywordsObj" label-width="110px" class="form food_form">
			<el-form-item label="客户名称:">
				<el-autocomplete class="inline-input" v-model="customname" :fetch-suggestions="querySearch" prefix-icon="el-icon-search"
				 placeholder="请输入内容"><template slot="prepend">客户名称:</template></el-autocomplete>
			</el-form-item>
			<el-form-item>
				<el-tag>当前账户余额为:</el-tag>
				<el-link :underline="false">¥{{userobj.money}}.00</el-link>
			</el-form-item>
			<el-form-item>
				<el-tag>客户名称:</el-tag>
				<el-link :underline="false">{{askeywordsObj.customname}}</el-link>
			</el-form-item>
			<el-form-item label="关键词:">
				<el-input v-model="insertaskeyword"></el-input>
			</el-form-item>
			<el-form-item label="服务类别:" :label-width="formLabelWidth">
				<el-select v-model="AppleObj" placeholder="请选择服务类别">
					<el-option v-for="item in Appleli" :key="item.configvalue" :label="item.configtypename" :value="item.configvalue">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="服务年限:" :label-width="formLabelWidth">
				<el-select v-model="YareObj" placeholder="请选择年限">
					<el-option v-for="item in Yearli.configvalue" :key="item" :value="item" :label="item+'年'">
					</el-option>
					<el-option v-for="s in shop" :key="s.id" :value="s.configvalue" :label="s.configtypename">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-tag>价格:</el-tag>
				<el-link :underline="false">{{sumprice}}</el-link>
			</el-form-item>
			<el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item>
							<el-button type="primary" @click="saveKrywoords()">保存<i class="el-icon-folder-checked el-icon--right"></i></el-button>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item>
							<el-button type="primary" @click="initfrom()">重置<i class="el-icon-refresh-right el-icon--right"></i></el-button>
						</el-form-item>
					</el-col>
				</el-row>
				</el-form-item>
		</el-form>
		</el-col>
		</el-row>

	</div>
</template>

<script>
	import {
		findasKeywordsAll,
		insertasKeywords,
		findYear,
		findApple,
		findOneByCustomName,
		queryByConfigType,
		findAll,
		selectAccount
	} from '@/api/getData'
	import headTop from '../components/headTop'
	import {
		mapState
	} from 'vuex'
	import {
		baseUrl,
		baseImgPath
	} from '@/config/env'

	export default {
		data() {
			return {
				insertaskeyword: '',
				formLabelWidth: '120px',
				//客户姓名集合
				devEuiArr: [],
				//联想数据集合
				restaurants: [],
				customname: '',
				//获得对象user
				userobj: {},
				//年份列表
				Yearli: {},
				//是否上传苹果商城列表
				Appleli: [],
				//年份对象
				YareObj:'',
				//是否苹果对象
				AppleObj: '',
				askeywordsObj: {},
				//优惠类型
				shop: [],
				//总价格
				sumprice: 0,
				//年份
				years: 0,
				//插入对象
				insertObj: {}
			}
		},
		created() {
			this.initData();
		},
		components: {
			headTop,
		},
		computed: {
			...mapState(['adminInfo']),
		},
		//动态加载
		watch: {
			customname: function() {
				this.findOneByCustomNamementh();
			},
			YareObj: function() {
				this.Sumpricemth()
			},
			AppleObj: function() {
				this.Sumpricemth()
			},$route(to,from){
              if(to.path=="/AsKeyInit"){
                this.initData();
            }
          }
		},


		methods: {
			//重置表单
			initfrom() {
				this.customname = '';
				this.insertaskeyword = '';
				this.sumprice = 0;
			},
			//提交关键字的
			async saveKrywoords() {
				this.insertObj = {
					keywords: this.insertaskeyword,
					agentid: this.askeywordsObj.agentid,
					agentname: this.askeywordsObj.agentname,
					customid: this.askeywordsObj.id,
					customname: this.askeywordsObj.customname,
					preregfrozenmoney: parseInt(this.AppleObj),
					price: 0,
					producttype: 1,
					serviceyears: this.YareObj,
					openapp: 0,
					preregdatetime: new Date().getTime(),
					preregpassdatetime: new Date().getTime(),
					regdatetime: new Date().getTime(),
					regpassdatetime: new Date().getTime(),
					ispass: 0,
					checkstatus: 1,
					isuse: 0
				}
				await insertasKeywords({...this.insertObj,userid:this.adminInfo.user.id,usercode:this.adminInfo.user.usercode})
				this.$message({
					type: 'success',
					message: '添加成功!'
				});
				this.$router.push({
					path: '/AsKeywordsList'
				})
			},
			//总钱数
			Sumpricemth() {
				this.sumprice = parseInt(this.YareObj) * parseInt(this.AppleObj);
			},
			async findOneByCustomNamementh() {
				for (var i = 0; i < this.restaurants.length; i++) {
					if (this.restaurants[i].customname == this.customname) {
						this.userobj = await selectAccount(this.restaurants[i].agentid);
						this.askeywordsObj = this.restaurants[i];
					}
				}
			},
			//初始化方法
			async initData() {
				try {
					this.askeywordsObj = {};
					this.Yearli = await findYear();
					this.Yearli = this.Yearli[0];
					this.Yearli.configvalue = parseInt(this.Yearli.configvalue);
					//是否上传苹果商城
					this.Appleli = await findApple()
					//优惠类型
					this.shop = await queryByConfigType(7);
					//this.shop = this.shop[0];
					//联想数据
					this.isfindall();
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			//封装联想输入的数据
			async isfindall() {
				this.restaurants = await findAll();
				for (var i = 0; i < this.restaurants.length; i++) {
					this.devEuiArr.push({
						"value": this.restaurants[i].customname
					})
				}
			},
			//联想输入
			querySearch(queryString, cb) {
				var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			//联想输入过滤
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
				};
			},
		}
	}
</script>

<style lang="less">
	@import '../style/mixin';

	.form {
		min-width: 400px;
		margin-bottom: 30px;

		&:hover {
			box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
			border-radius: 6px;
			transition: all 400ms;
		}
	}

	.food_form {
		border: 1px solid #eaeefb;
		padding: 10px 10px 0;
	}

	.form_header {
		text-align: center;
		margin-bottom: 10px;
	}

	.category_select {
		border: 1px solid #eaeefb;
		padding: 10px 30px 10px 10px;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
	}

	.add_category_row {
		height: 0;
		overflow: hidden;
		transition: all 400ms;
		background: #f9fafc;
	}

	.showEdit {
		height: 185px;
	}

	.add_category {
		background: #f9fafc;
		padding: 10px 30px 0px 10px;
		border: 1px solid #eaeefb;
		border-top: none;
	}

	.add_category_button {
		text-align: center;
		line-height: 40px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		border: 1px solid #eaeefb;
		border-top: none;
		transition: all 400ms;

		&:hover {
			background: #f9fafc;

			span,
			.edit_icon {
				color: #20a0ff;
			}
		}

		span {
			.sc(14px, #999);
			transition: all 400ms;
		}

		.edit_icon {
			color: #ccc;
			transition: all 400ms;
		}
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}

	.cell {
		text-align: center;
	}
</style>
